import React, { useEffect, useState } from "react";
import '../../appcommon.css';
import styles from './home.module.css';
import { useDispatch } from "react-redux";
import { DotLoading, Mask } from "antd-mobile";
import { saveEvent } from "@/store/actions/saveEvent";
import { useHistory } from "react-router-dom/cjs/react-router-dom.min";


import icon_nav_back_white from "@/assets/icon_nav_back_white.png"

import NavigateBar from "@/components/NavigateBar";
import BottomTabBar from "@/components/BottomTabBar/bottomTabBar";
import AddToHomeDialog from "@/components/AddToHomeDialog/AddToHomeGifDialog";
import { LangThai } from "@/utils/langThai";
import { getBillSumInfo } from "@/store/actions/user";


/**
 * 登录页
 */
export default function Home() {

    //loading状态
    const [maskVisible, setMaskVisible] = useState(false)

    //显示add home弹框
    const [addHomeMaskVisible, setAddHomeMaskVisible] = useState(false);

    // 账单汇总
    const [curResult, setCurResult] = useState({});

    // 文案翻译
    const [curLang, setCurLang] = useState(LangThai);

    // 获取 Redux 分发器
    const dispatch = useDispatch()

    //router
    const history = useHistory()

    //清空登录信息
    useEffect(() => {
        //关闭loading
        setMaskVisible(false)

        // 查询账单汇总信息
        doGetBillSumInfo();

        //打点
        doHitEvent("HOME_START")

        return () => {
            //打点
            doHitEvent("HOME_END")
        }
    }, []);

    // 点击 nav back
    const onHandleNavBackClick = () => {
    };

    // 点击 transfer item
    const onAddBillClick = () => {
        history.push('/addbill');
    };


    // 获取账单汇总信息 返回
    const onDoGetBillSumInfoCallback = (success, data) => {
        //关闭loading
        setMaskVisible(false)
        console.log('获取账单汇总信息 返回: ' + success);

        if (success && data) {
            // 处理流程业务
            
            // 更新
            setCurResult(data);
        }
    };

    //打点接口
    const doHitEvent = async (type, remark = "") => {
        console.log("doHitEvent: " + type + " , " + remark);

        try {
            //获取Action
            const action = saveEvent(type, remark)

            //触发接口
            await dispatch(action)

        } catch (e) {
            console.log(e)
        }
    }

    // 获取账单汇总信息
    const doGetBillSumInfo = async () => {
        console.log("doGetBillSumInfo: ");

        try {
            //显示loading
            setMaskVisible(true)

            //获取Action
            const action = getBillSumInfo(onDoGetBillSumInfoCallback)

            //触发接口
            await dispatch(action)

        } catch (e) {
            console.log(e)
        }
    }

    return (
        <div className='pageRoot pageBackgroundColorGray'>
            <NavigateBar theme="white" showLogout={false} leftIcon={icon_nav_back_white} onAddFavorite={() => { setAddHomeMaskVisible(true) }} onAddHome={() => { setAddHomeMaskVisible(true) }} onGoBack={onHandleNavBackClick}>首页</NavigateBar>

            {/* 使用添加 home screen bar */}
            {/* <AddFavorite onAddHome={() => { setAddHomeMaskIsHomeMode(true); setAddHomeMaskVisible(true) }} /> */}

            <div className="pageContentColumnFull pageContentPaddingHorizontal16px">

                {/* 菜单 列表 */}
                <div className="pageContentRowFull pageMarginTop10px">
                    <div className="pageContentRowFull pageBackgroundColorWhite pageCardGrayBorder">
                        {/* Transfer */}
                        <div className={styles.homeMenuColumn} onClick={() => { }}>
                            <div className={styles.homeMenuTitle}>总支出</div>
                            <div className={styles.homeMenuValue}>{curResult.totalPayout}</div>
                        </div>

                        {/* Receive */}
                        <div className={styles.homeMenuColumn} onClick={() => { }}>
                            <div className={styles.homeMenuTitle}>总收入</div>
                            <div className={styles.homeMenuValue}>{curResult.totalIncome}</div>
                        </div>
                    </div>
                </div>

                {/* 底部 margin */}
                <div className="pageBottomEdge"> </div>

                <div className="pageBtnSubmit" onClick={onAddBillClick} >记一笔</div>
            </div>

            {/* 底部 margin */}
            <div className="pageBottomEdge"> </div>

            {/* tab bar */}
            <BottomTabBar page="home" />

            {/* 添加桌面快捷方式 */}
            <AddToHomeDialog visible={addHomeMaskVisible} onClose={() => { setAddHomeMaskVisible(false) }}></AddToHomeDialog>

            {/* load mask */}
            <Mask visible={maskVisible} opacity={0.1}
                onMaskClick={() => { }}>
                <div className="pageLoadingOverlayContent">
                    <span style={{ fontSize: 24, color: '#3498DB' }} >
                        <DotLoading color="currentColor" />
                    </span>
                </div>
            </Mask>
        </div >
    )
}